<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Flex 布局- 骰子</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <style type="text/css">
  .box{width: 110px; height: 110px; background: #f0f0f0; border-radius: 5px; margin: 15px; padding: 5px; display: flex; padding: 10px; float: left;}
  .item{background: #000; border-radius: 50%; width: 35px; height: 35px; display: block;}

  .box1{justify-content: center; align-items: center;}
  .box2{align-items: center; justify-content: space-between;}
  .box3 .item:nth-child(2){align-self: center;}
  .box3 .item:nth-child(3){align-self: flex-end;}
  .box4 {flex-wrap: wrap; align-content: space-between; }
  .box4 .column {flex-basis: 100%; display: flex; justify-content: space-between; }

  .box5 {flex-wrap: wrap; align-content: space-between; }
  .box5 .column {flex-basis: 100%; display: flex; justify-content: space-between; }
  .box5 .column:nth-child(2){justify-content:center;}

  .box6{flex-wrap:wrap; justify-content:space-between; }
  .box6 .column{flex-basis: 100%; display: flex; justify-content: space-between;}
  </style>
</head>

<body>
<div class="parent">
  <div class="box box1">
    <span class="item"></span>
  </div>


  <div class="box box2">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  
  <div class="box box3">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>

  <div class="box box4">
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </div>

  <div class="box box5">
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div class="column">
      <span class="item"></span>
    </div>
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </div>
  <div class="box box6">
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div class="column">
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </div>
</div>

</body>

</html>
